<template>
  <div class="">
    <input v-model="num.current" step="20" type="number" />
    <div>
      {{ num.tweenedNumber.toFixed(0) }}
    </div>

    <div v-if="data.length">
      {{ data[0].state }}
    </div>

    <div
      :startVal="countto.startVal"
      :endVal="countto.endVal"
      :duration="countto.duration"
    >
      <div v-if="data[0].buytime != ''">
        <strong
          ><del>{{ intervalTime }}</del></strong
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, watchEffect, onUnmounted } from "vue";
import gsap from "gsap";
import { CountTo } from "vue3-count-to";

import { axios } from "./server/axios";

const num = reactive({
  current: 0,
  tweenedNumber: 0,
});
const countto = ref({
  // 需要滚动的时间
  duration: 1000,
  // 初始值
  startVal: 0,
  // 最终值
  endVal: 2018,
});

// 定时时间
let intervalTime = ref("0天0小时0分钟0秒");
//当前时间
let nowTime = ref(0);
// 结束时间
let endTime = ref(0);
let timer: any = null;
let data = reactive<any>([{}]);

const getData = () => {
  axios.get("../public/order.json").then((res: any) => {
    console.log(res, "orderData");
    data = res.order;
  });
};
const innerDate = (date: any, d?: any) => {
  let today = new Date(date).valueOf();
  let myday: any = today + d * 24 * 60 * 60 * 1000; //加减天
  // myday = today + h * 60 * 60 * 1000;//加减时
  // 　　var myday = today + d * 60 * 1000;//加减分
  // 　　var myday = today + d * 1000;//加减秒

  myday = new Date(myday);
  console.log(myday);

  let yyyy = myday.getFullYear();
  let MM = myday.getMonth() + 1;
  let dd = myday.getDate();
  let hh = myday.getHours();
  let mm = myday.getMinutes();
  let ss = myday.getSeconds();
  return {
    year: yyyy,
    month: MM,
    day: dd,
    hour: hh,
    minutes: mm,
    seconds: ss,
    date:
      yyyy +
      "-" +
      (MM < 10 ? "0" + MM : MM) +
      "-" +
      (dd < 10 ? "0" + dd : dd) +
      " " +
      hh +
      ":" +
      mm +
      ":" +
      ss,
  };
};
const CountDown = (
  year: any,
  month: any,
  day: any,
  hours: any,
  minutes: any,
  seconds: any
) => {
  let now = new Date();
  let endDate = new Date(year, month - 1, day, hours, minutes, seconds);

  let leftTime = endDate.getTime() - now.getTime(); //计算剩余的毫秒数
  if (leftTime <= 0) {
    leftTime = 0;
  }
  let leftsecond = leftTime / 1000; //计算剩余的秒数
  day = Math.floor(leftsecond / (60 * 60 * 24));
  let hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
  let minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
  let second = Math.floor((leftTime / 1000) % 60);
  return `${day}天${hour}小时${minute < 10 ? "0" + minute : minute}分钟${
    second < 10 ? "0" + second : second
  }秒`;
};

getData();
let timeout = setInterval(() => {
  if (localStorage.getItem("today")) {
  } else {
    localStorage.setItem("today", JSON.stringify(new Date().valueOf()));
  }

  if (data[0].buytime) {
    let today = localStorage.getItem("today");

    if (today) {
      let myday: any = Number(today) + 3 * 60 * 60 * 1000;
      myday = new Date(myday);
      let yyyy = myday.getFullYear();
      let MM = myday.getMonth() + 1;
      let dd = myday.getDate();
      let hh = myday.getHours();
      let mm = myday.getMinutes();
      let ss = myday.getSeconds();
      let endtime = innerDate(data[0].buytime, 3);

      intervalTime.value = CountDown(
        endtime.year,
        endtime.month,
        endtime.day,
        endtime.hour,
        endtime.minutes,
        endtime.seconds
      );
      // intervalTime.value = CountDown(yyyy,MM,dd,hh,mm,ss)
    }
  }
}, 1000);
// watch(
//   [()=>num.current,()=>intervalTime.value],
//   (newVal, oldVal) => {
//    console.log(newVal);

//     gsap.to(num, {
//       duration: 1,
//       tweenedNumber: newVal[0],
//     });
//   }
// );
watchEffect(() => {
  gsap.to(num, {
    duration: 1,
    tweenedNumber: num.current,
  });
  console.log(intervalTime.value, "计时时间");
});
onUnmounted(() => {
  clearInterval(timeout);
});
</script>

<style scoped></style>
